<template>
	<view class="CollectMoney">
		<view class="moneyT">
			<view class="tItem left" v-if="swiperCurrent==0">
				<view class="title">
					全部欠款: {{momenyFormat(entity.OwnSincere)}}
				</view>
				<view class="content">
					本月欠款:{{momenyFormat(entity.MoonSincere)}}
				</view>
			</view>
			<view class="tItem left" v-else>
				<view class="title">
					累计收款: {{momenyFormat(entity.MonthCollection)}}
				</view>
				<view class="content">
					本月收款:{{momenyFormat(entity.DayCollection)}}
				</view>
			</view>
			<view @click="swiperTitleClickChange" class="tItem"
				style="display: flex;justify-content: center;align-items: center;background: linear-gradient(to left, #0B7D29, #45BC64);width: 30%;">
				切换{{swiperPageType}}
			</view>
		</view>
		<uni-search-bar style="background-color: #ffffff7d;" radius="5" placeholder="请输入客户名称进行查询" clearButton="always"
			v-model="Keyword" @confirm="search" @cancel="cancel" @clear="cancel" />
		<!-- :indicator-dots="indicatorDots" -->
		<swiper class="container" :circular="circular" :interval="interval" :duration="duration"
			:current="swiperCurrent" indicator-active-color="#5f5f5f" indicator-color="#b6b6b6" @change="swiperChange">
			<swiper-item style="">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="lower">
					<view :class="[item.Isitover>0 && (item.PendingSum - item.CollectionSum>0) ?'backred':'unbackred']"
						class="cItem " v-for="(item, index) in data" :key="item.CustomerId">
						<view class="" @click="toOverdue(item)" style="flex: 9;">
							<view class="scrollTag" v-if="item.PendingSum - item.CollectionSum>0">
								<image v-if="item.Isitover>0" style="" src="../../static/yuqi.png" mode=""></image>
							</view>
							<!-- <uni-tag v-if="item.Isitover>0" class="tag" text="逾期" type="error"></uni-tag> -->
							<view class="customer">
								{{item.cCusName || " "}}{{item.DelayDays?'(账期'+item.DelayDays+'天)':''}}
							</view>
							<view class="line" style="font-weight: bold;">
								<view class="cell left">
									<view class="lable">欠款余额</view>
								</view>
								<view class="cell right">
									<b style="font-size: 40rpx;"><text style="font-size: 10rpx;">￥</text>
										{{momenyFormat(item.PendingSum - item.CollectionSum)}}</b>

								</view>
							</view>
							<view style="font-weight: normal;">
								单号：{{ item.BillId? getReplaceId("S"+item.BillId):""}}
							</view>
							<view class="line">
								<view class="cell left">
									<view class="lable font">联系方式</view>
								</view>
								<view class="cell right font">
									{{item.cCusPhone || ""}}
								</view>
							</view>
							<view class="line">
								<view class="cell left">
									<view class="lable font">最近欠款/日期</view>
								</view>
								<view class="cell right font" style="">
									<text
										style="flex: 5;">￥{{item.QIANMoney? momenyFormat(item.QIANMoney) : '0.00'}}</text>
									<text style="flex: 5;">{{item.QIANTIME?item.QIANTIME.substring(0,10):''}}</text>
								</view>
							</view>
							<view class="line">
								<view class="cell left">
									<view class="lable font">最近收款/日期</view>
								</view>
								<view class="cell right font">
									<text
										style="flex:5">￥{{ item.SHOUMoney? momenyFormat(item.SHOUMoney) : '0.00'}}</text>
									<text style="flex: 5;">{{item.SHOUTIME?item.SHOUTIME.substring(0,10):''}}</text>
								</view>
							</view>
							<view class="line">
								<view class="cell left">
									<view class="lable font">最近对账日期</view>
								</view>
								<view class="cell right font">
									<text style="flex:5"></text>
									<text style="flex: 5;">{{item.BillDate?item.BillDate.substring(0,10):''}}</text>
								</view>
							</view>
							<view class="line select">
								<checkbox-group v-if="item.PendingSum - item.CollectionSum > 0  " class="flexLeft"
									name="" style="display: flex;"
									@click.stop="checkboxSelectChange($event, item,index)">
									<view style="flex: 5;">
										<label style="flex: 1;display: flex;align-items: center;">
											<checkbox :value="item.Id" :checked="item.checked" />
										</label>
									</view>
								</checkbox-group>
								<view class="flexRight" style="">
									<image @click.stop="share(item)" src="/static/stateIcon/duiz.png" mode=""></image>
									<!-- <text @click.stop="share(item)">对账单</text> -->
									<!-- <text @click.stop="CallForPay(item)">催款</text> -->
									<!-- <text @click.stop="toList(item)">明细账</text> -->
								</view>
							</view>
						</view>
					</view>
					<!-- 上拉显示更多 -->
					<view class="" style="padding-bottom: 60rpx;">
						<uniLoadMore :status="status" :contentText="contentText" :rows="data"></uniLoadMore>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- style="margin-left: 20rpx;" -->
			<swiper-item style="">
				<CollectMoney ref="CollectMoney" />
			</swiper-item>
		</swiper>
		<!-- <uni-transition ref="ani" custom-class="transition" mode-class="fade" :show="checkboxShow">
			<view class="edit">
				<checkbox-group @change="allSelect" name="">
					<label>
						<checkbox value="all"
							:checked="selectArr.length>0&&selectArr.length == this.data.filter(item => item.cCusPhone).length" />
						<text>全选</text>
					</label>
				</checkbox-group>
				<button :disabled="selectArr.length<=0" type="primary" @click="allCall">催款</button>
			</view>
		</uni-transition> -->
		<!-- @trigger="trigger" @fabClick="fabClick" -->
		<!-- 时间弹窗 -->
		<uni-popup ref="popupDialog" type="dialog">
			<view style="background-color: #fff;border-radius: 15rpx;padding: 30rpx;width: 75%;margin: 0 auto;">
				<view style="">
					<text style="padding-bottom: 20rpx;">请选择时间范围:</text>
					<uni-datetime-picker style="margin-top: 20rpx;margin-bottom: 60rpx;" @change="changeDate"
						:clear-icon="false" v-model="range" type="daterange" />
				</view>
				<button @click="submitButton" class="submitButton">批量制作对账单</button>
			</view>
		</uni-popup>
		<!-- 	<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@fabClick="fabClick" /> -->
		<!-- 对账悬浮按钮  待打开-->
		<uni-transition custom-class="transition" mode-class="fade" :show="checkboxShow">
			<movable ref="movable" v-show="isShow" @leftClick="leftClick" @rightClick="rightClick"
				@duizhangClick="duizhangClick"></movable>
		</uni-transition>
		<!-- <view class="fab">
			<view class="menu" style="z-index: 999;">
					<image src="../../static/c1.png" class="menuTrigger" @click="clickMenu"></image>
					<image src="../../static/i02.png" class="menuItem menuItem1" :class="{'active':menuFlag}"></image>
			    <image src="../../static/i11.png" class="menuItem menuItem2"  :class="{'active':menuFlag}"></image>
			</view>
		</view> -->




	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	// 引入销账列表组件
	import CollectMoney from './CollectMoney.vue'
	import {
		toThousands,
		momenyFormat,
		getMonthRange
	} from '@/util/util.js'
	export default {
		components: {
			CollectMoney,
			uniLoadMore
		},
		data() {
			return {
				mask: false,
				menuFlag: false,
				// 是否显示悬浮按钮
				isShow: true,
				// 已选中的对账id数组
				selectIdListData: [],
				direction: 'horizontal',
				vertical: 'bottom',
				directionStr: '垂直',
				horizontal: 'right',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				// 页面的类型  欠款页面  还是销账页面
				swiperPageType: "销账",
				//轮播图配置
				// 轮播图当前滑块所处的滑块的index
				swiperCurrent: 0,
				indicatorDots: true, //是否显示指示点
				circular: false, //是否采用衔接滑动
				autoplay: true, //是否自动华东
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长
				entity: {},
				data: [],
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					// SortField: "CreateTime",
					SortField: "QIANTIME",
					SortType: "desc",
				},
				total: 0,
				Keyword: '',
				range: [],
				checkboxShow: true,
				selectArr: [],
				// 公司id
				CompanyId: uni.getStorageSync('CompanyInfo').Id
			}
		},
		onLoad() {
			// 搜索条件置空
			this.Keyword = ""
			// this.range = getMonthRange(1)
			// this.getDataList()
		},
		onHide() {
			console.log('页面销毁')
			// 清空选择的批量列表
			this.selectIdListData = []
		},
		onShow() {
			//清楚查询页面条件缓存
			uni.removeStorageSync('CollectMoneySearch')
			uni.removeStorageSync('indexSearchQueryValue')
			console.log('获取keyword', this.Keyword)
			// 搜索条件置空
			// 搜索条件置空
			this.Keyword = ""
			this.data = []
			this.status = "loading"
			// 待打开
			this.getDataList()
			this.getHeaderData()


			this.$nextTick(() => {
				if (this.swiperCurrent == 0) {
					this.$refs.movable.menuFlag = false
				}
			})



			// 清空对账浮动按钮弹窗
			if (this.swiperCurrent == 1) {
				// this.$nextTick(() => {
				// 获取子组件销账收款列表数据
				this.$refs.CollectMoney.pagination.PageIndex = 1
				this.$refs.CollectMoney.data = []
				this.$refs.CollectMoney.keyword = ""

				this.$refs.CollectMoney.getDataList()

				// })
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/user'
			})
			// this.checkboxShow = !this.checkboxShow
			// // #ifdef APP
			// var webView = this.$mp.page.$getAppWebview();
			// webView.setTitleNViewButtonStyle(e.index, {
			// 	text: this.checkboxShow ? '取消' : '批量',
			// });
			// // #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数

			if (this.swiperCurrent == 0) {
				// 隐藏悬浮按钮
				this.checkboxShow = true
				this.isShow = true
				this.status = "loading"
				this.data = []
				this.pagination.PageIndex = 1
				this.swiperPageType = "销账"
				// 动态设置导航栏文字
				uni.setNavigationBarTitle({
					title: "欠款"
				});

				// 重新获取最顶部数据
				this.getHeaderData()
				this.getDataList()
			} else {
				// 隐藏悬浮按钮
				this.checkboxShow = false
				this.isShow = false
				this.swiperPageType = "欠款"
				// 动态设置导航栏文字
				uni.setNavigationBarTitle({
					title: "收款销账"
				});
				// 获取子组件销账收款列表数据
				this.$refs.CollectMoney.data = []
				this.$refs.CollectMoney.pagination.PageIndex = 1
				this.$refs.CollectMoney.pagination.PageRows = 10
				this.$refs.CollectMoney.status = "loading"
				this.$refs.CollectMoney.getDataList()
				// 获取子组件最顶部收款总数据
				this.$refs.CollectMoney.getHeaderData()
				// 将父组件最顶部区域数据进行赋值
				this.entity = this.$refs.CollectMoney.headerData
			}
			// // 加载

			// // 重新获取查询数据
			// this.getOpenOrderListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data) {
				if (data) {
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			duizhangClick() {
				this.menuFlag = !this.menuFlag
			},
			rightClick() {
				this.$api.msg('待开发')
			},
			clickMenu() {
				this.menuFlag = !this.menuFlag;
			},
			// 批量对账选择
			checkboxSelectChange(e, item, index) {
				// 找出符合元素的第一个元素的位置下标  
				let newIndex = this.selectIdListData.findIndex(ev => ev === item.Id)
				// this.selectIdListData.push(e.detail.value[0])
				if (newIndex < 0) {
					// 说明没有这个id  push
					this.selectIdListData.push(item.Id)
				} else {
					this.selectIdListData.splice(newIndex, 1)
				}

			},

			// 对账悬浮按钮
			leftClick() {
				console.log('对账列表选择', this.selectIdListData)

				// 判断是否有选择对账数据
				if (this.selectIdListData.length == 0) {
					this.$api.msg('请先选择对账列表')
					return
				}
				// 清空原始日期
				this.range = []
				this.$refs.popupDialog.open()
			},

			// 悬浮弹窗确定批量选择对账提交
			submitButton(type) {
				if (this.range.length == 0) {
					this.$api.msg('请先选择时间范围')
					return
				}
				// 批量制作对账单
				let obj = {
					CompanyId: this.CompanyId,
					CustomerIds: this.selectIdListData,
					StartTime: this.range[0],
					EndTime: this.range[1]
				}
				// 清空已选好的对账id列表数据
				this.selectIdListData = []
				uni.showLoading({
					title: '对账中'
				})
				this.$http('post', '/BO/BIllcollection/SaveBillConfirmList', obj).then(res => {
					if (res.Success) {
						// uni.hideLoading()
						uni.showToast({
							title: res.Msg,
							icon: "success"
						})

						// 关闭弹窗
						this.$refs.popupDialog.close()
						this.data = []
						this.getDataList()
						// 关闭对账弹窗
						this.$refs.movable.menuFlag = false
					} else {
						uni.showToast({
							title: "对账失败",
							icon: "error"
						})
					}
				})
			},
			// 销账。欠款按钮切换
			swiperTitleClickChange() {
				if (this.swiperCurrent == 0) {
					this.swiperCurrent = 1
				} else {
					this.swiperCurrent = 0
				}
				// 重新获取最顶部数据
				this.getHeaderData()
			},
			// 轮播图区域页面切换事件
			swiperChange(e) {
				console.log(e);
				this.Keyword = ""
				this.$refs.CollectMoney.keyword = ""
				this.swiperCurrent = e.detail.current
				// 隐藏悬浮按钮
				this.checkboxShow = !this.checkboxShow
				this.isShow = !this.isShow
				if (e.detail.current == 0) {
					// this.swiperCurrent=1
					this.swiperPageType = "销账"
					// // 动态设置导航栏文字
					uni.setNavigationBarTitle({
						title: "欠款"
					});
					this.status = "loading"
					this.data = []
					this.pagination.PageIndex = 1
					this.getDataList()
				} else {
					// this.swiperCurrent=0
					this.swiperPageType = "欠款"
					uni.setNavigationBarTitle({
						title: "收款销账"
					});
					this.$refs.CollectMoney.data = []
					this.$refs.CollectMoney.pagination.PageIndex = 1
					// 获取子组件销账收款列表数据
					this.$refs.CollectMoney.getDataList()
				}
				// 赋值当前父组件最顶部数据
				this.getHeaderData()

			},
			// 逾期
			toOverdue(obj) {
				uni.navigateTo({
					url: '/pages/Arrears/RunningBook?data=' + JSON.stringify(obj)
				})
				// if (obj.Isitover <= 0){
				// 	uni.navigateTo({
				// 		url: '/pages/Arrears/RunningBook?data=' + JSON.stringify(obj)
				// 	})
				// }
				// else{
				// 	uni.navigateTo({
				// 		url: '/pages/Arrears/overdue?CustomerId=' + obj.Id
				// 	})
				// }

			},
			// 批量催款
			allCall() {

			},
			// 全选
			allSelect(e) {
				if (e.detail.value.length > 0) {
					this.selectArr = this.data.filter(item => item.cCusPhone)
				} else {
					this.selectArr = []
				}
			},
			// 多选
			checkboxChange(e, obj) {
				if (e.detail.value.length > 0) {
					this.selectArr.push(obj)
				} else {
					let idx = this.selectArr.findIndex(item => item.Id == obj.Id)
					this.selectArr.splice(idx, 1)
				}
			},
			// 时间范围选择
			changeDate(e) {
				this.range = e
			},
			// 对账
			share(data) {
				// 清空已选择的批量列表
				this.selectIdListData = []
				uni.navigateTo({
					url: '/pages/Arrears/reconArrearList?data=' + JSON.stringify(data) + '&showBar=' + true
				})
			},
			// 去明细页面
			toList(item) {
				uni.navigateTo({
					url: '/pages/Arrears/RunningBook?data=' + JSON.stringify(item)
				})
			},
			// 催款弹窗
			CallForPay(data) {
				uni.navigateTo({
					url: '/pages/Arrears/CallForPay?data=' + JSON.stringify(data)
				})
				// if (!data.cCusPhone) this.$refs.popup.open()
				// else this.$api.msg('催款成功')
			},
			// 触底加载
			lower() {
				this.status = "loading"
				if (this.data.length >= this.total) {
					this.contentText.contentnomore = "没有更多了"
					this.status = "noMore"
					return
				}
				this.pagination.PageIndex++
				this.$http('post', '/BO/CustomerInfo/GetCustomerInfoList', {
					...this.pagination,
					Search: {
						CompanyId: uni.getStorageSync('CompanyInfo').Id,
						CustomerName: this.Keyword
					}
				}).then(res => {
					// this.status="loading"
					if (!res.Success) {
						this.status = "noMore"
						this.$api.msg(res.Msg)
						return
					}
					this.data = this.data.concat(res.Data)
					this.total = res.Total
					this.data.forEach(item => {
						this.$set(item, 'checked', false)
					})
					this.status = "noMore"
				})
			},
			// 查询
			search(e) {
				if (this.swiperCurrent == 0) {
					this.Keyword = e.value
					this.data = []
					this.pagination.PageIndex = 1
					this.pagination.PageRows = 10
					this.status = "loading"
					this.getDataList()
				} else {
					this.$refs.CollectMoney.keyword = e.value
					// 获取子组件销账收款列表数据
					this.$refs.CollectMoney.data = []
					this.$refs.CollectMoney.status = "loading"
					this.$refs.CollectMoney.getDataList()
					// 获取子组件最顶部收款总数据 暂时注释后续需要
					// this.$refs.CollectMoney.getHeaderData()
					// 将父组件最顶部区域数据进行赋值
					this.entity = this.$refs.CollectMoney.headerData
				}

			},
			cancel() {
				this.Keyword = ''
				if (this.swiperCurrent == 0) {
					this.data = []
					this.pagination.PageIndex = 1
					this.pagination.PageRows = 10
					this.status = "loading"
					this.getDataList()
				} else {
					// 获取子组件销账收款列表数据
					this.$refs.CollectMoney.keyword = ""
					this.$refs.CollectMoney.data = []
					this.$refs.CollectMoney.status = "loading"
					this.$refs.CollectMoney.getDataList()
					// 获取子组件最顶部收款总数据
					this.$refs.CollectMoney.getHeaderData()
					// 将父组件最顶部区域数据进行赋值
					this.entity = this.$refs.CollectMoney.headerData
				}
			},
			// 获取数据
			getDataList() {
				console.log('qiankuanshujuhuoqu');
				// this.status="loading"
				this.pagination.PageIndex = 1
				this.$http('post', '/BO/CustomerInfo/GetCustomerInfoList', {
					...this.pagination,
					Search: {
						CompanyId: uni.getStorageSync('CompanyInfo').Id,
						CustomerName: this.Keyword
					}
				}).then(res => {
					if (!res.Success) {
						this.status = "noMore"
						this.$api.msg(res.Msg)
						this.contentText.contentnomore = "今日未开单"
						return
					}
					this.data = res.Data
					this.total = res.Total
					this.data.forEach(item => {
						this.$set(item, 'checked', false)
					})
					if (this.pagination.PageIndex * this.pagination.PageRows > this.total) {
						this.status = "noMore"
						this.contentText.contentnomore = "没有更多了"
						return
					}
				})
			},
			getHeaderData() {
				let company = uni.getStorageSync('CompanyInfo').Id
				// 欠款顶部统计
				this.$http('post', '/BO/BIlling/GetOwingStatistics', {
						Search: {
							CommpayId: company,
						}
					})
					.then(res => {
						if (!res.Success) return this.$api.msg(res.Msg)
						this.entity.OwnSincere = res.Data.OwnSincere
						this.entity.MoonSincere = res.Data.MoonSincere

					})
				// 销账顶部统计
				this.$http('post', '/BO/BIlling/GetDateCollectionData?CompanyId=' + company).then(res => {
					if (!res.Success) return this.$api.msg(res.Msg)
					this.entity.MonthCollection = res.Data.MonthCollection
					this.entity.DayCollection = res.Data.DayCollection
				})
			},
			// 千分位
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	// /deep/.uni-date-x {
	// 	border-radius: 0;
	// }

	// /deep/.uni-date-x--border {
	// 	border: none;
	// }
	/deep/ .uni-checkbox-input {
		border-radius: 50%;
	}

	.CollectMoney {
		height: 100%;
		width: 100%;
		background-image: url('https://api.yoojet.com/User/20231129/4756278565bb4a4999d32b078a92b912/1729693711886979072.png');
		background-size: cover;

		.fab {
			.menu {
				position: fixed;
				width: 110rpx;
				height: 110rpx;
				bottom: 320rpx;
				right: 44rpx;
				border-radius: 50%;

				.menuTrigger {
					position: absolute;
					top: 0;
					left: 0;
					width: 70rpx;
					height: 70rpx;
					background-color: green;
					border-radius: 50%;
					padding: 20rpx;
					cursor: pointer;
					transition: .35s ease;
				}

				.menuItem {
					position: absolute;
					width: 50rpx;
					height: 50rpx;
					top: 10rpx;
					left: 10rpx;
					padding: 20rpx;
					border-radius: 50%;
					background-color: white;
					border: none;
					box-shadow: 0 0 5rpx 1rpx rgba(0, 0, 0, .05);
					z-index: -1000;
					// opacity: 0;
				}

				.menuItem1 {
					transition: .35s ease;
				}

				.menuItem2 {
					transition: .35s ease .1s;
				}

				.menuItem3 {
					transition: .35s ease .2s;
				}

				.menu.active .menuTrigger {
					transform: rotateZ(225deg);
					background-color: pink;
				}

				.menu.active .menuItem1 {
					top: -106rpx !important;
					left: -120rpx !important;
					opacity: 1;
				}

				.menu.active .menuItem2 {
					top: 10rpx;
					left: -164rpx;
					opacity: 1;
				}

				.menu.active .menuItem3 {
					top: 126rpx;
					left: -120rpx;
					opacity: 1;
				}
			}

		}






		.submitButton {
			background-color: #2979ff;
			color: #fff;
			font-size: 35rpx;
			font-weight: bold;
		}

		.submitButton2 {
			background-color: #D17EF5;
			margin-top: 20rpx;
			color: #fff;
			font-size: 35rpx;
			font-weight: bold;
		}

		.moneyT {
			display: flex;
			justify-content: space-around;
			padding: 10px;
			padding-top: 18px;
			background-color: #ffffff7d;

			.swiperTitle {
				display: flex;
				align-items: center;

				.title {
					background-image: linear-gradient(#0D5FE0, #9DA5F7);
					padding: 15rpx 25rpx;
					color: #fff;
					border-radius: 15rpx;
				}
			}

			.tItem.left {
				width: 60%;
			}

			.tItem {
				background-color: #27a859;
				color: #fff;
				box-sizing: border-box;
				border-radius: 10rpx;
				text-align: center;

				.title {
					border-bottom: 1px solid #eee;
					line-height: 2;
				}

				.content {
					// font-weight: bold;
					line-height: 2;
					font-size: 30rpx;
				}
			}
		}

		// 轮播图区域


		.container {
			padding: 10px;
			box-sizing: border-box;
			/* #ifdef H5 */
			height: calc(100vh - 250px);
			/* #endif */

			/* #ifdef APP */
			height: calc(100vh - 160px);

			/* #endif */
			.cItem.backred {
				background: rgb(255, 240, 240) !important;
			}

			.cItem.unbackred {
				background: #fff !important;
			}

			.scrollTag {
				position: absolute;
				right: 0;
				top: 0;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.customer {
				margin-bottom: 20rpx;
			}

			.cItem {
				background-color: #fff;
				border-radius: 10rpx;
				box-sizing: border-box;
				font-weight: 600;
				padding: 10rpx;
				padding-bottom: 5rpx;
				margin-bottom: 10rpx;
				position: relative;

				.tag {
					position: absolute;
					right: 0;
					top: 0;
				}

				.bottomLine {
					padding-bottom: 10rpx;
				}

				.line.select {
					margin-top: 15rpx;
					display: flex;
					align-items: center;
				}

				.line {
					display: flex;

					// height: 60rpx;
					// align-items: self-end;
					.font {
						font-weight: normal;
						font-size: 28rpx;
					}

					.cell.left {
						flex: 4;
					}

					.cell.right {
						flex: 6;
					}

					.cell {

						// flex: 1;
						display: flex;
						justify-content: space-between;
						margin-right: 20rpx;

						.lable {
							// width: 60px;
						}

						text {
							// flex: 1;
							// color: blue;
						}
					}
				}

				.flexLeft {
					display: flex;
					align-items: center;
					flex: 3;
				}

				.flexRight {
					flex: 7;
					display: flex;
					justify-content: flex-end;
					color: #2979ff;
					font-weight: normal;

					image {
						width: 140rpx;
						height: 50rpx;
					}

					text {
						border-bottom: 1px solid #2979ff;
						margin-left: 60rpx;
					}
				}
			}
		}

		.edit {
			display: flex;
			position: fixed;
			background-color: #fff;
			bottom: 50px;
			/* #ifdef APP */
			bottom: 0;
			/* #endif */
			left: 0;
			// right: 0;
			width: 100vw;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;
			justify-content: space-between;

			text {
				color: #777;
			}

			button {
				width: 70%;
				margin: 0;
			}
		}
	}
</style>